
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .wrapper {display: flex;border: 1px solid orangered;padding: 10px;}
    .col {border: 1px solid #808080;height: 500px;width: 200px;margin: 0 10px;padding: 10px;}
    .item {border: 1px solid #808080;margin: 5px 0;}
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="col1 col">
            <div class="item" id="item1" draggable="true">item1</div>
            <div class="item" id="item2" draggable="true">item2</div>
            <div class="item" id="item3" draggable="true">item3</div>
        </div>
        <div class="col2 col"></div>
        <div class="col3 col"></div>
        <div class="col4 col"></div>
    </div>
    <script>
        let cols = document.getElementsByClassName('col');
        for (let col of cols) {
            col.ondragenter = e => { 
                console.log('放置元素 ondragenter', '<' + e.dataTransfer.getData('item') + '>'); 
            }
            col.ondragover = e => {
                e.preventDefault();
                console.log('放置元素 ondragover', '<' + e.dataTransfer.getData('item') + '>');
            }
            col.ondragleave = e => { 
                console.log('放置元素 ondragleave', '<' + e.dataTransfer.getData('item') + '>'); 
            }
            col.ondrop = function(e) {
                console.log('放置元素 ondrop', '<' + e.dataTransfer.getData('item') + '>');
                this.append(document.getElementById(e.dataTransfer.getData('item')));
            }
        }
        let items = document.getElementsByClassName('item');
        for (let item of items) {
            item.ondragstart = e => {
                console.log('拖拽元素 ondragstart');
                e.dataTransfer.setData('item', e.target.id);
            }
            item.ondragend = e => {
              console.log('拖拽元素 ondragend');
            }
        }
    </script>
</body>
</html>